<template>
  <div
    class="module-box"
    :style="{
      height: tHeight,
      background: `url(${
        bg === 'height1'
          ? height1
          : bg == 'short1'
          ? short1
          : bg == 'short2'
          ? short2
          : bg == 'long1'
          ? long1
          : long2
      }) no-repeat`,
      backgroundSize: '100% 100%',
    }"
  >
    <div class="title-label">{{ title }}</div>
    <div class="module-content">
      <slot />
    </div>
  </div>
</template>
<script>
import short1 from "@/assets/title-bg-short-1.png";
import short2 from "@/assets/title-bg-short-2.png";
import long1 from "@/assets/title-bg-long-1.png";
import long2 from "@/assets/title-bg-long-2.png";
import height1 from "@/assets/title-bg-height-1.png";
export default {
  name: "module-title",
  props: {
    // 标题
    title: {
      type: String,
      default: "",
    },
    // 高度
    height: {
      type: String,
      default: "100%",
    },
    // 背景图
    bg: {
      type: String,
      default: "short1",
    },
  },
  data() {
    return {
      tHeight: "", // 模块高度
      short1,
      short2,
      long1,
      long2,
      height1,
    };
  },
  mounted() {
    this.calculateHeight();
  },
  methods: {
    // 计算表格高度
    calculateHeight() {
      let h = this.height;
      if (typeof h === "string") {
        const result = h.match(/\d+/);
        h = result ? Number(result[0]) + "px" : "auto";
      } else if (typeof h === "number") {
        h = h + "px";
      } else {
        h = "auto";
      }
      this.tHeight = h;
    },
  },
};
</script>
<style lang="scss" scoped>
.module-box {
  width: 100%;

  .title-label {
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-family: Alibaba PuHuiTi 20;
    font-size: 26px;
    color: #ffffff;
    text-shadow: 0 0 10px rgba(86, 164, 254, 0.6);
  }

  .module-content {
    width: 100%;
    height: calc(100% - 54px);
    padding: 10px 20px;
    box-sizing: border-box;
  }
}
</style>
